<template>
	<el-card class="form-container">
		<el-form :model="dataForm" ref="dataForm" :rules="dataRule"  @keyup.enter.native="dataFormSubmitHandle()" label-width="90px">
			<el-form-item label="用户名" prop="loginName">
				<el-input v-model="dataForm.loginName"  placeholder="请输入用户名,用于登录操作"></el-input>
			</el-form-item>
			<el-form-item label="密码" prop="passWord">
				<el-input v-model="dataForm.passWord"  placeholder="请输入密码"></el-input>
			</el-form-item>
			<el-form-item label="昵称" prop="userNickName">
				<el-input v-model="dataForm.userNickName"  placeholder="请输入昵称"></el-input>
			</el-form-item>
			<el-form-item label="邮箱" prop="userEmail">
				<el-input v-model="dataForm.userEmail"  placeholder="请输入电子邮件"></el-input>
			</el-form-item>
			<el-form-item label="手机号" prop="userPhone">
				<el-input v-model="dataForm.userPhone"  placeholder="请输入手机号" ></el-input>
			</el-form-item>
			<el-form-item>
				<el-button @click="cancel">取消</el-button>
				<el-button type="primary"  @click="submit('dataForm')">确定</el-button>
			</el-form-item>
		</el-form>
	</el-card>
</template>

<script>
import {addSystemUser,validataLoginName,validataPhoneExist,validateEmailExist} from '@/api/admin/systemUser'
export default{
	name: 'add-user',
	data(){
		var validateUserName = (rule, value, callback) =>{
			validataLoginName(value).then(() =>{
				callback();
			}).catch((err) => {
				return callback(new Error(err.data.responseMessage));
			});
		};
		// var validatePassWord = (rule, value, callback) =>{
		// 	var reg = /^[\u4E00-\u9FA5]{2,30}$/
		// 	if (!reg.test(value) ) {
		// 		return callback(new Error("请输入商户姓名"));
		// 	} else {
		// 		callback();
		// 	}
		// };
		var validateUserEmail = (rule, value, callback) =>{
			validateEmailExist(value).then(() => {
				callback();
			}).catch((err) => {
				return callback(new Error(err.data.responseMessage));
			});
		};
		var validateUserPhone = (rule, value, callback) =>{
			if (!value) {
				return callback(new Error('请输入手机号'));
			}
			if (!/^((1[3,5,8][0-9])|(14[5,7])|(17[0,6,7,8])|(19[7,9]))\d{8}$/.test(value)) {
				return callback(new Error('手机号格式不正确,请重新输入')); 
			}
			//校验手机号是否存在
			validataPhoneExist(value).then(() => {
				callback();
			}).catch((err) => {
				return callback(new Error(err.data.responseMessage));
			});
		};
		return {
			dataForm: {
				loginName: '',
				passWord: '',
				userNickName: '',
				userEmail: '',
				userPhone: ''
			},
			dataRule: {
				loginName: [
					{ required: true, message: '请输入用户名', trigger: 'blur'},
					{validator: validateUserName, trigger: 'blur' }
				],
				passWord: [
					{ required: true, message: '请输入密码', trigger: 'blur' },
				],
				userEmail:[
					{ required: true, message: '请输入邮箱', trigger: 'blur'},
					{ type: 'email', message: '请输入正确的邮箱地址', trigger: ['blur', 'change'] },
					{ validator: validateUserEmail , trigger: 'blur'}
				],
				userPhone: [
					{ required: true, message: '请输入手机号', trigger: 'blur' },
					{ validator: validateUserPhone, trigger: 'blur' }
				]
			}
		}
	},
	methods:{
		cancel(){
			this.$router.go(-1)
		},
		submit(){
			this.$refs['dataForm'].validate((valid) => {
				if (!valid) {
					return false
				}
				addSystemUser(this.dataForm).then(() => {
					this.$notify({
						title: '添加成功',
						message: '添加用户成功',
						type: 'success',
						duration: 2000,
						onClose: this.$router.go(-1)
					})
				})
			})
		}
	}
}
</script>

<style>
</style>
